<template>
  <div class="universal">
    <!-- 面包屑区域 -->
    <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="/">一级菜单</a></el-breadcrumb-item>
        <el-breadcrumb-item>二级菜单</el-breadcrumb-item>
        <el-breadcrumb-item>三级菜单</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="box-card">
      <el-row :gutter="9">
        <el-form label-width="80px">
          <el-col :span="8" class="shopcol">
            <el-form-item label="优惠卷名:">
              <el-input v-model="query" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8" class="shopcol">
            <el-form-item label="日期:">
              <div class="block">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" class="btnq" @click="btnclear">查询</el-button>
            <el-button class="btn" @click="clear">重置</el-button>
          </el-col>
          <el-col :span="2">
            <el-dropdown>
              <span class="el-dropdown-link">
                展开<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                <el-dropdown-item command="b">狮子头</el-dropdown-item>
                <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col>
          <el-button type="primary" @click="aStore()">+新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <br>
      <el-table :data="list" style="width: 100%;" class="table">
        <el-table-column type="selection" width="55" fixed />
        <el-table-column align="center" prop="discountname" label="优惠卷名" width="189" fixed />
        <el-table-column align="center" prop="discountlimit" label="优惠金额/元" width="190" />
        <el-table-column align="center" prop="servicerestrictions" label="使用限制" width="190" />
        <el-table-column align="center" prop="servicelife" label="使用期限" width="190" />
        <el-table-column align="center" prop="storename" label="店铺名称" width="190" />
        <el-table-column align="center" prop="getamount" label="领取金额/元" width="190" />
        <el-table-column align="center" prop="remainnumber" label="剩余数量/张" width="190" />
        <el-table-column
          align="center"
          prop="state"
          label="确认退款率"
          width="170"
          icon="el-icon-d-caret"
        >
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="delStore(row.id)">删除</el-button>
            <el-button type="text" size="small" @click="eStore(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <template>
        <el-row class="paging" type="flex" justify="center" align="middle" style="heught:60px">
          <el-pagination
            :current-page="qureInfo._page"
            :page-sizes="[1, 2, 5, 7]"
            :page-size="qureInfo._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </el-card>
    <el-dialog :title="showText" :visible="dialogVisible" @close="btnCancel">
      <el-form ref="roleForm" label-width="120px" :model="form">
        <el-form-item label="优惠卷名称" prop="name">
          <el-input v-model="form.discountname" />
        </el-form-item>
        <el-form-item label="优惠劵金额">
          <el-input v-model="form.discountlimit" />
        </el-form-item>
        <el-form-item label="使用限制">
          <el-input v-model="form.servicerestrictions" />
        </el-form-item>
        <el-form-item label="使用时效">
          <el-input v-model="form.servicelife" />
        </el-form-item>
        <el-form-item label="账号领取限制">
          <el-input v-model="form.getamount" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getStore, addStore, delStore, editStore, Store } from '@/api/storecoupon';
export default {
  name: 'Storecoupon',
  data() {
    return {
      formData: {
        a: '',
      },
      value1: '',
      datafrom: {
        discountname: '',
        discountlimit: '',
        servicerestrictions: '',
        servicelife: '',
        storename: '',
        getamount: '',
        remainnumber: '',
      },
      list: [],
      dialogVisible: false, // 新增页显示与隐藏
      // 新增
      form: {
        discountname: '',
        discountlimit: '',
        servicerestrictions: '',
        servicelife: '',
        getamount: '',
      },
      qureInfo: {
        _page: 1, // 当前页码值
        _limit: 5, // 每页显示条数
      },
      total: 10,
      query: '', // 查询
      showText: '新增优惠劵',
      currentDate: {},
    };
  },
  //   computed: {
  //     showText() {
  //       return this.form.id ? '编辑优惠劵' : '新增优惠劵';
  //     },
  //   },
  created() {
    this.Store();
  },
  methods: {
    //   获取页面
    async getStore() {
      const data = await getStore();
      this.list = data.data;
      console.log(this.list);
    },
    // 删除
    async delStore(id) {
      try {
        await this.$confirm('确定要删除吗？');
        await delStore(id);
        // await this.getStore();
        await this.Store();
        this.$message.success('删除成功');
      } catch (err) {
        console.log('凉了', err);
      }
    },
    // 新增
    aStore() {
      this.dialogVisible = true;
    },
    // 编辑
    async eStore(row) {
      this.currentDate = row;
      this.showText = '编辑优惠劵';
      console.log(row);
      //   this.form = row;
      this.form.discountname = row.discountname;
      this.form.discountlimit = row.discountlimit;
      this.form.servicerestrictions = row.servicerestrictions;
      this.form.servicelife = row.servicelife;
      this.form.getamount = row.getamount;
      this.dialogVisible = true;
    },
    async btnOK() {
      try {
        await this.$refs.roleForm.validate();
        console.log(this.form);
        // 只有校验通过的情况下 才会执行await的下方内容
        // form这个对象有id就是编辑 没有id就是新增
        if (this.currentDate.id) {
          console.log(this.currentDate.id);
          await editStore({ ...this.form, id: this.currentDate.id });
        } else {
          // 新增业务
          console.log('222');
          await addStore(this.form);
        }
        // 重新拉取数据
        // this.getStore();
        this.Store();
        this.$message.success('操作成功');
        this.dialogVisible = false; // 关闭弹层  =>  触发el-dialog的事件close事件
      } catch (error) {
        console.log('凉了', error);
      }
    },
    btnCancel() {
      //   (this.form = {
      //     name: '',
      //     servicerestrictions: '',
      //     servicelife: '',
      //     limited: '',
      //     releasedquantity: '',
      //   }),
      this.showText = '新增优惠劵';
      this.dialogVisible = false;
    },
    // async btnOK() {
    //   await addUniversal(this.form);
    //   this.dialogVisible = false;
    // },
    // 分页
    async Store() {
      const list = await Store(this.qureInfo);
      this.total = list.headers['x-total-count'] - 0;
      this.list = list.data;
    },
    handleSizeChange(val) {
      this.qureInfo._limit = val;
      this.Store();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.qureInfo._page = val;
      this.Store();
    },
    // 头部查询
    async btnclear() {
      if (this.query) {
        const { data } = await Store({ discountname: this.query });
        console.log(data, 'gg');
        this.list = data;
      } else {
        this.getauditpage();
      }
    },
    // 重置
    clear() {
      this.query = '';
      this.value1 = '';
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #f0f2f5;
  .box-card {
    margin: 20px;
    color: #8d8d8d;
  }
  .shopcol {
    margin-left: 40px;
  }
  .el-dropdown {
    top: 10px;
  }
  .btnq {
    margin-left: 20px;
    width: 80px;
  }
  .el-col el-col-4 {
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .touxian {
    height: 100px;
    width: 100px;
    background-color: #000;
  }
  .file {
    height: 100px;
    width: 100px;
    border: 1pxsolid;
  }
  .paging {
    margin-top: 30px;
  }
}
</style>
